<!-- MyFooter -->
<template>
  <div>
    <el-checkbox v-model="isAll" @change="handelIsAll"> 已完成 {{ checkedNum }} / 全部 {{ total }}</el-checkbox>
    <el-button type="danger" size="small" :style="{ visibility: checkedNum > 0 ? 'visible' : 'hidden' }" @click="delAll">清除已完成的任务</el-button>
  </div>
</template>

<script>
export default {
  name: 'MyFooter',
  props: ['todos'],
  data() {
    return {
      isAll: ''
    }
  },
  methods: {
    /**
     * 控制是否全选
     * 只能用 @change 或者 @click 事件触发方法，
     * 如果使用监视属性，会出现由手动切换每一个 todo 的 checked 时，当选中的数量超出最大值（此时 isAll 由 f->t 会触发相关方法）变为 0 情况。
     */
    handelIsAll() {
      // console.log(this.isAll)
      this.$bus.$emit('switchIsAllByStatus', this.isAll)
    },

    /**
     * 删除所有选中的 todo
     */
    delAll() {
      this.$bus.$emit('delAllByDone')
    }
  },
  computed: {
    // todos 的总数
    total() {
      return this.todos.length
    },
    // 已选中的任务数量
    checkedNum() {
      return this.todos.reduce((pre, todo) => todo.done ? ++pre : pre,0)
    }, 
  },
  watch: {
    // total 变化时，检查isAll
    total: {
      immediate: true,
      handler(newVal) {
        // 根据 total 判断 isAll
        this.isAll = newVal === this.checkedNum && this.total > 0
      }
    },

    // checkNum 变化时，检查isAll
    checkedNum: {
      immediate: true,
      handler(newVal) {
        // 根据 checkedNum 判断 isAll
        this.isAll = newVal === this.total && this.total > 0
      }
    },
  }
}
</script>

<style scoped>
  div {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    padding-left: 10px
  }

  div .el-checkbox{
    display: flex;
    justify-content: center; 
    align-items: center; 
  }
</style>